<template>
	<view class="my_content">
		<view class="my_top" style="background: url('../../../static/my/myBG.png'); background-size: 100%,100%;">
			<view class="user_info">
				<view class="user_img_name">
					<view class="img">
						<image src="../../../static/my/userimg.png"></image>
					</view>
					<view class="name_phone">
						<view class="name">
							一棵小白杨
						</view>
						<view class="phone">
							13522222222
						</view>
					</view>
					<view class="set">
						<image src="../../../static/my/set.png"></image>
					</view>
				</view>
				<view class="role_info">
					<view class="role_info_list">
						<view class="list_img">
							<image src="../../../static/my/baoming.png"></image>
						</view>
						<view class="list_name">
							报名中
						</view>
					</view>
					<view class="role_info_list">
						<view class="list_img">
							<image src="../../../static/my/USD.png"></image>
						</view>
						<view class="list_name">
							代缴费记录
						</view>
					</view>
					<view class="role_info_list">
						<view class="list_img">
							<image src="../../../static/my/userinfo.png"></image>
						</view>
						<view class="list_name">
							个人信息
						</view>
					</view>
				</view>
			</view>
			<view class="top_title">
				职业技能等级认定服务
			</view>
		</view>
		<van-cell-group inset :border='false'>
			<van-cell title="签名管理" is-link icon="edit" :border='false'/>
			<van-cell title="知识测试" is-link icon="description-o" :border='false'/>
			<van-cell title="考评员签字" is-link icon="records-o" :border='false'/>
			<van-cell title="承诺书管理" is-link icon="newspaper-o" :border='false' />
			<van-cell title="我的证卡" is-link icon="idcard" :border='false'/>
			<van-cell title="证件采集助手" is-link icon="debit-pay" :border='false'/>
		</van-cell-group>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.my_content {
		height: 100vh;
		background-color: #F8F8F8;

		.my_top {

			box-sizing: border-box;
			width: 100%;
			height: 654rpx;
			padding: 200rpx 32rpx 30rpx 32rpx;

			.user_info {
				.user_img_name {
					width: 100%;
					height: 128rpx;

					.img {
						float: left;
						width: 128rpx;
						height: 128rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name_phone {
						margin-left: 24rpx;
						float: left;
						padding: 19rpx 0;

						.name {
							font-size: 40rpx
						}

						.phone {
							margin-top: 8rpx;
							font-size: 28rpx;
							color: rgba(40, 40, 40, 0.4);
						}
					}

					.set {
						margin-top: 40rpx;
						right: 10rpx;
						width: 48rpx;
						height: 48rpx;
						float: right;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

			}

			.role_info {
				margin-top: 64rpx;
				width: 686rpx;
				height: 128rpx;
				display: flex;
				justify-content: space-around;

				.role_info_list {
					box-sizing: border-box;
					padding: 10rpx;
					background-color: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					width: 212rpx;
					height: 128rpx;
					display: flex;
					flex-flow: column;
					justify-content: space-between;

					.list_img {
						margin-left: 70rpx;
						width: 56rpx;
						height: 56rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.list_name {
						width: 100%;
						text-align: center;
						font-size: 24rpx;
						color: #282828;
					}
				}
			}

			.top_title {
				margin-top: 48rpx;
				font-size: 16px;
				color: #282828;
			}
		}
	}
</style>